<template>
  <el-dialog :close-on-click-modal='false' v-drag :title="$t('新建导出任务')" :v-if="dialogVisible" :visible.sync="dialogVisible" width="470px" top="5vh" @close='close'>
    <div class="dialogContentBoxMaxHeight90">
      <el-form ref="form" :model="record" label-width="130px" :rules="rules" label-position="left" style="margin:0 30px;">
        <el-form-item :label="$t('开始时间')" prop="startTime">
          <el-date-picker v-model="record.startTime" clearable type="datetime" placeholder="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" size="small"></el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('结束时间')" prop="endTime">
          <el-date-picker v-model="record.endTime" clearable type="datetime" placeholder="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" size="small"></el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('所属模块')" prop="mode">
          <el-select v-model="record.mode" :placeholder="$t('请选择模块')" size="small" style="width:220px;" clearable filterable>
            <el-option v-for="item in modeList" :key="item.name" :label="$t(item.chinese_name)" :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('日志级别')" prop="level">
          <el-select v-model="record.level" :placeholder="$t('请选择')" size="small" style="width:220px;" clearable filterable>
            <el-option v-for="(item, key) in levelList" :key="key" :label="item" :value="key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('协议类型')" prop="protocol">
          <el-select v-model="record.protocol" :placeholder="$t('请选择')" size="small" style="width:220px;" clearable filterable>
            <el-option v-for="item in protocolList" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('事件类型')" prop="eventtype">
          <el-select v-model="record.eventtype" :placeholder="$t('请选择')" size="small" style="width:220px;" clearable filterable>
            <el-option v-for="item in eventTypeList" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('事件动作')" prop="eventaction">
          <el-select v-model="record.eventaction" :placeholder="$t('请选择')" size="small" style="width:220px;" clearable filterable>
            <el-option v-for="item in eventActionList" :key="item" :label="$t(item)" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('源地址')" prop="sip">
          <el-input v-emoji v-model="record.sip" size="small" style="width:220px;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('目的地址')" prop="dip">
          <el-input v-emoji v-model="record.dip" size="small" style="width:220px;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('源端口')" prop="sport">
          <el-input v-emoji v-model="record.sport" size="small" style="width:220px;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('目的端口')" prop="dport">
          <el-input v-emoji v-model="record.dport" size="small" style="width:220px;"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">{{$t('确 定')}}</el-button>
      <el-button @click="close">{{$t('取 消')}}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { addLogExport, getEvent } from '@/api/system/logData'

export default {
  name: 'LogExportDialog',
  data () {
    var validateName = (rule, value, callback) => {
      if (String(value).trim() === '') {
        callback(new Error(this.$t('不能为空')))
      } else {
        callback()
      }
    }
    return {
      dialogVisible: false,
      record: {
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        mode: '', // 所属模块
        level: '', // 日志级别
        protocol: '', // 协议类型
        eventtype: '', // 事件类型
        eventaction: '', // 事件动作
        sip: '', // 源地址
        dip: '', // 目的地址
        sport: '', // 源端口
        dport: '' // 目的端口
      },
      recordCopy: {
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        mode: '', // 所属模块
        level: '', // 日志级别
        protocol: '', // 协议类型
        eventtype: '', // 事件类型
        eventaction: '', // 事件动作
        sip: '', // 源地址
        dip: '', // 目的地址
        sport: '', // 源端口
        dport: '' // 目的端口
      },
      modeList: [],
      levelList: {
        1: 'ERROR',
        2: 'ALERT',
        3: 'INFO',
        4: 'DEBUG'
      },
      protocolList: [],
      eventTypeList: [],
      eventActionList: [],
      rules: {
        startTime: [{ required: false, validator: validateName, trigger: 'blur' }],
        endTime: [{ required: false, validator: validateName, trigger: 'blur' }]
      }
    }
  },
  methods: {
    init (data) {
      this.dialogVisible = true
      getEvent().then(res => {
        if (res.status === 0) {
          this.eventTypeList = res.info.event_type
          this.eventActionList = res.info.event_action
          this.protocolList = res.info.l4type
          this.modeList = res.info.mode
        }
      })
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          addLogExport(this.record).then(res => {
            if (res.status === 0) {
              this.$message({
                message: this.$t('添加成功'),
                type: 'success'
              })
              this.close()
              this.$parent.listData()
            }
          })
        }
      })
    },
    close () {
      this.record = Object.assign({}, this.recordCopy)
      this.dialogVisible = false
      this.$refs.form.resetFields()
    }
  }
}
</script>
<style lang="scss">
.el-time-panel__btn.cancel {
  float: right;
}
</style>
